<script lang="ts" setup>
const { list, width, height } = defineProps<{
  list: any[];
  width: number;
  height: number;
}>();
</script>
<template>
  <div class="waterfall" ref="waterfall">
    <TransitionGroup>
      <PicxImage
        v-for="item in list"
        :key="item.id"
        :image="item.src"
        :id="item.id"
        :style="{
          position: 'absolute',
          width: item.width + 'px',
          height: item.height + 'px',
          top: item.top + 'px',
          left: item.left + 'px',
        }"
      />
    </TransitionGroup>
  </div>
</template>
<style lang="scss" scoped>
@keyframes show {
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
  animation: show 0.5s forwards;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  animation: show 0.5s forwards;
}
.waterfall {
  position: relative;
  height: v-bind("height + 'px'");
  display: flex;
  width: v-bind("width + 'px'");
}
</style>
